<script lang="ts" setup>
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { ArrangeTemplateApi } from '@/apis/education'
import { useForm } from '@/hooks'
import { useTable } from '@/hooks/modules/useTable'
import dayjs from 'dayjs'
import ArrangeTemplateFormPanel from './ArrangeTemplateFormPanel.vue'

const { form, resetForm } = useForm<ArrangeTemplateApi.ArrangeTemplateQuery>({
  keyword: undefined,
  term: undefined,
  classYear: dayjs().year().toString(),
  grade: undefined,
})

const {
  tableData,
  loading,
  pagination,
  search,
  handleDelete,
} = useTable(pagination => ArrangeTemplateApi.getArrangeTemplatePage({ ...form, ...pagination }))

const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    fixed: 'left',
    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
  },
  { title: '全称', dataIndex: 'fullName' },
  { title: '简称', dataIndex: 'name', width: 120 },
  { title: '年份', dataIndex: 'classYear', slotName: 'classYear' },
  { title: '课次', dataIndex: 'lessonCount', slotName: 'lessonCount', width: 60 },
  { title: '排课日期', dataIndex: 'lessonDate', slotName: 'lessonDate', ellipsis: true, tooltip: true },
  {
    title: '操作',
    slotName: 'action',
    width: 180,
    fixed: 'right',
  },
]

const ArrangeTemplateFormPanelRef = ref<InstanceType<typeof ArrangeTemplateFormPanel>>()

const onCreate = () => {
  ArrangeTemplateFormPanelRef.value?.create()
}

const onEdit = (record) => {
  ArrangeTemplateFormPanelRef.value?.open(record.id)
}

const onCopy = (record) => {
  ArrangeTemplateFormPanelRef.value?.copy(record.id)
}

// 删除
const onDelete = (item) => {
  return handleDelete(() => ArrangeTemplateApi.deleteArrangeTemplate(item.id), {
    content: `是否确定删除该条数据？`,
    showModal: true,
  })
}

const refresh = () => {
  resetForm()
  search()
}
</script>

<template>
  <ProTable
    :data="tableData"
    :columns="columns"
    :loading="loading"
    :pagination="pagination"
    @refresh="refresh"
  >
    <template #toolbar-left>
      <a-space size="large">
        <a-year-picker v-model="form.classYear" style="width: 160px;" placeholder="年份" @change="search" />
        <DictSelect v-model="form.term" type="button" code="TermEnum" @change="search" />
        <DictSelect v-model="form.grade" code="Grade" style="width: 160px;" placeholder="年级" @change="search" />
      </a-space>
    </template>
    <template #toolbar-right>
      <a-button v-permission="['system:biz-rule:manage']" type="primary" @click="onCreate">
        <template #icon>
          <icon-plus />
        </template>
        新增期段
      </a-button>
    </template>
    <template #classYear="{ record }">
      <div>
        {{ record.classYear }}年 · <DictLabel v-model="record.term" code="TermEnum" /> · <DictLabel v-model="record.grade" code="Grade" />
      </div>
    </template>
    <template #lessonCount="{ record }">
      <a-tag>
        {{ record.lessonCount }}次
      </a-tag>
    </template>
    <template #lessonDate="{ record }">
      <span>{{ record.startDate }} ~ {{ record.endDate }}</span>
    </template>
    <template #action="{ record }">
      <a-space v-permission="['education:ArrangeTemplate:write']">
        <a-link v-permission="['system:biz-rule:manage']" @click="onEdit(record)">
          编辑
        </a-link>
        <a-link v-permission="['system:biz-rule:manage']" @click="onCopy(record)">
          复制
        </a-link>
        <a-link v-permission="['system:biz-rule:manage']" status="danger" @click="onDelete(record)">
          删除
        </a-link>
      </a-space>
    </template>
  </ProTable>
  <ArrangeTemplateFormPanel ref="ArrangeTemplateFormPanelRef" @change="search" />
</template>

<style lang="less" scoped>
</style>
